<template>
  <el-dialog title="奖金计算方法配置" :close-on-click-modal="false" :visible.sync="visible" v-if="visible" fullscreen
             append-to-body>
    <el-form :model="dataForm" ref="dataForm" label-width="140px">
      <el-container>
        <el-main style="height:calc(100vh  - 170px); padding: 0 45px;">
          <el-table
            :data="jjx"
            border
            style="width: 100%">
            <el-table-column
              prop="jjxMc"
              label="奖金项"
              header-align="center"
              align="center"
              width="360">
              <template slot-scope="scope">
                {{ scope.row.jjxMc }}
                <el-tooltip content="点击按钮后将使用第一列的公式配置(可为空)对所有列进行同步配置" effect="light" placement="right" v-if="fzList.length>1">
                  <el-button type="primary" plain  @click="pl('jjx',scope.row.id)" class="ml10">按首列配置</el-button>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              label="人员分组"
              header-align="center">
              <el-table-column v-for="(fz,i) in fzList" :key="i"
                               :label="fz.ryfzMc"
                               header-align="center"
                               align="center"
                               min-width="200">
                <template slot="header" slot-scope="scope">
                 <div class="mb5"> {{ fz.ryfzMc }}</div>
                  <el-tooltip content="点击按钮后将使用第一行的公式配置(可为空)对所有行进行同步配置" effect="light" placement="top" v-if="jjx.length>1">
                    <el-button  type="primary" plain @click="pl('fz',fz.id)" class="ml10">按首行配置</el-button>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-select v-model="dataForm[fz.id+'_'+scope.row.id]" clearable style="width: 99%">
                    <el-option v-for="(gs,k) in jjgs" :key="k" :label="gs.gsMc"
                               :value="gs.id"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">保存配置</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {getObj, saveUpdate} from '@/api/jiangjin/jiangjinjjjsffb'
import {getJjDeptJjx} from '@/api/jiangjin/jiangjinjjxxxb'
import {getJjDeptJjgs} from '@/api/jiangjin/jiangjingspzb'
import {getRyfzbList} from '@/api/jiangjin/jiangjinryfzb'

export default {
  data() {
    return {
      visible: false,
      deptId: null,
      fzList: [],
      jjx: [],
      jjgs: [],
      dataForm: {}
    }
  },
  methods: {
    init(id) {
      this.deptId = id;
      this.visible = true;
      this.dataForm = {};
      getObj(id).then(res => {
        let data = JSON.parse(res.data.data.jjConfig);
        for (var i in data) {
          for (var j in data[i].jjx) {
            this.$set(this.dataForm, data[i].id + "_" + data[i].jjx[j].id, data[i].jjx[j].jjgs.id);
          }
        }
      })
      getJjDeptJjx(id).then(res => {
        this.jjx = res.data.data;
      })
      getJjDeptJjgs(id).then(res => {
        //判断个人公式
        let jjgs = res.data.data
        this.jjgs = [];
        for (var i in jjgs) {
          if (jjgs[i].gsFl == '个人') {
            this.jjgs.push(jjgs[i]);
          }
        }
      })
      getRyfzbList(id).then(res => {
        //判断个人公式
        this.fzList = res.data.data;
      })
    },
    pl(lx, id) {
      if (lx == "fz") {
        let value = this.dataForm[id + "_" + this.jjx[0].id] ? this.dataForm[id + "_" + this.jjx[0].id] : "";
        for (var i in this.jjx) {
          this.$set(this.dataForm, id + "_" + this.jjx[i].id, value);
        }
      }
      if (lx == "jjx") {
        let value = this.dataForm[this.fzList[0].id + "_" + id] ? this.dataForm[this.fzList[0].id + "_" + id] : "";
        for (var i in this.fzList) {
          this.$set(this.dataForm, this.fzList[i].id + "_" + id, value);
        }
      }
    },
    dataFormSubmit() {
      let fz = [];
      for (var i in this.fzList) {
        let info = JSON.parse(JSON.stringify(this.fzList[i]));
        info.jjx = [];
        for (var j in this.jjx) {
          let data = this.jjx[j];
          if (this.dataForm[info.id + "_" + data.id]) {
            for (var k in this.jjgs) {
              if (this.jjgs[k].id == this.dataForm[info.id + "_" + data.id]) {
                data.jjgs = this.jjgs[k];
              }
            }
            info.jjx.push(data)
          }
        }
        if (info.jjx.length > 0) {
          fz.push(info);
        }
      }
      //console.log(fz);
      let obj = {
        jjDeptId: this.deptId,
        jjConfig: JSON.stringify(fz),
        jjRyfz: JSON.stringify(this.fzList),
        jjFzry: "",
        jjJjx: JSON.stringify(this.jjx),
        jjGs: JSON.stringify(this.jjgs)
      }
      saveUpdate(obj).then(res => {
        this.$notify.success('配置保存成功');
        this.visible = false
        this.$emit('refreshDataList')
      })

    }
  }
}
</script>
